<template>
  <div class="full-layout">
    <el-container class="top">
      <swiperVideo></swiperVideo>
    </el-container>
    <el-container class="bottom">
      <el-container class="left">
        <clock></clock>
        <!--        <HomeTimeControl></HomeTimeControl>-->
      </el-container>
      <el-container class="right">
        <el-image src="right.png" style="width: 100%; height: 200px;"></el-image>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.full-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative
}

.top {
  width: 100%;
  height: 100%;
  flex: 8;
  display: flex;
  overflow: hidden;
}

.bottom {
  display: flex;
  flex: 2;
}

.left {
  flex: 3;
  overflow: hidden;
}

.right {
  flex: 7;
}
</style>

<script setup name="main" lang="ts">
import swiperVideo from '@/components/swiperVideo.vue';
import clock from '@/components/clock.vue';
import HomeTimeControl from '@/components/HomeTimeControl.vue';
import {onMounted} from "vue";
import {initWebSocket} from '@/utils/websocket';
import {useRouter} from "vue-router";

const {currentRoute} = useRouter();
const route = currentRoute.value;

onMounted(() => {
  console.log(route.query.clientId);
  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
  // initWebSocket(protocol + '117.72.65.84:8089/resource/websocket');
  localStorage.setItem('clientId', route.query.clientId as string);
  initWebSocket(protocol + window.location.host + "/prod-api/board/websocket");
})
</script>